<template>
  <Form :data="model" @ok="onOk" ok-msg="保存成功">
    <FormItem field="appId" title="应用" required v-if="!model.id">
      <AppCascader v-model="model.appId" />
    </FormItem>
    <FormItem field="name" title="名称" required>
      <Input v-model="model.name" />
    </FormItem>
    <FormItem field="key" title="Key" required>
      <Input v-model="model.key" placeholder="permission:p/c/r/u/d" />
    </FormItem>
    <FormItem field="sort" title="排序" required>
      <InputNumber v-model="model.sort" />
    </FormItem>
    <FormItem field="url" title="URL">
      <Input v-model="model.url" />
    </FormItem>
    <FormItem field="remark" title="备注">
      <Input type="textarea" v-model="model.remark" />
    </FormItem>
    <template #op>
      <ModalButton :loading="loading" />
    </template>
  </Form>
</template>

<script setup lang="ts">
import { Form, FormItem, Input, InputNumber, Message, ModalButton } from '@idmy/ui'
import { createOrUpdatePermission } from './services'
import AppCascader from '@/components/sys/App/cascader/index.vue'

defineOptions({ name: 'PermissionCreate' })

const props = defineProps({ model: Object })

const model = reactive(props.model ?? {})

const [onOk, loading] = useLoading(async () => {
  await createOrUpdatePermission(model)
  Message.success('保存成功')
  Modal.ok(model)
})
</script>
